import F2 from '@antv/f2';
import device from '@system.device';

let chartInstance

function wrapEvent(e) {
    if (!e) return;

    if (!e.preventDefault) {
        e.preventDefault = function() {};
    }
    e.touches.forEach((touch) => {
        touch.x = touch.localX;
        touch.y = touch.localY;
        touch.clientX = touch.globalX;
        touch.clientY = touch.globalY;
    })
    return e;
}

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    onShow() {
        //        device.getInfo({
        //            success: (d) => {
        //                console.log('FIRE')
        //                const width = d.windowWidth / d.screenDensity;
        //                const height = 300;
        //                const el = this.$refs.canvas;
        //                const ctx = el.getContext('2d');
        ////                const bufferEl = this.$refs.bufferCanvas;
        ////                const bufferCtx = bufferEl.getContext('2d');
        //                // Step 1: 创建 Chart 对象
        //                const chart = new F2.Chart({
        //                    context: ctx,
        ////                    bufferContext: bufferCtx,
        ////                    bufferEl: bufferEl,
        //                    width,
        //                    height,
        //                    animate: false
        //                });
        //                chartInstance = chart
        //
        //
        //                const data = [{
        //                      date: '2017-06-05',
        //                      value: 116
        //                  }, {
        //                      date: '2017-06-06',
        //                      value: 129
        //                  }, {
        //                      date: '2017-06-07',
        //                      value: 135
        //                  }, {
        //                      date: '2017-06-08',
        //                      value: 86
        //                  }, {
        //                      date: '2017-06-09',
        //                      value: 73
        //                  }, {
        //                      date: '2017-06-10',
        //                      value: 85
        //                  }, {
        //                      date: '2017-06-11',
        //                      value: 73
        //                  }, {
        //                      date: '2017-06-12',
        //                      value: 68
        //                  }, {
        //                      date: '2017-06-13',
        //                      value: 92
        //                  }, {
        //                      date: '2017-06-14',
        //                      value: 130
        //                  }, {
        //                      date: '2017-06-15',
        //                      value: 245
        //                  }, {
        //                      date: '2017-06-16',
        //                      value: 139
        //                  }, {
        //                      date: '2017-06-17',
        //                      value: 115
        //                  }, {
        //                      date: '2017-06-18',
        //                      value: 111
        //                  }, {
        //                      date: '2017-06-19',
        //                      value: 309
        //                  }, {
        //                      date: '2017-06-20',
        //                      value: 206
        //                  }, {
        //                      date: '2017-06-21',
        //                      value: 137
        //                  }, {
        //                      date: '2017-06-22',
        //                      value: 128
        //                  }, {
        //                      date: '2017-06-23',
        //                      value: 85
        //                  }, {
        //                      date: '2017-06-24',
        //                      value: 94
        //                  }, {
        //                      date: '2017-06-25',
        //                      value: 71
        //                  }, {
        //                      date: '2017-06-26',
        //                      value: 106
        //                  }, {
        //                      date: '2017-06-27',
        //                      value: 84
        //                  }, {
        //                      date: '2017-06-28',
        //                      value: 93
        //                  }, {
        //                      date: '2017-06-29',
        //                      value: 85
        //                  }, {
        //                      date: '2017-06-30',
        //                      value: 73
        //                  }, {
        //                      date: '2017-07-01',
        //                      value: 83
        //                  }, {
        //                      date: '2017-07-02',
        //                      value: 125
        //                  }, {
        //                      date: '2017-07-03',
        //                      value: 107
        //                  }, {
        //                      date: '2017-07-04',
        //                      value: 82
        //                  }, {
        //                      date: '2017-07-05',
        //                      value: 44
        //                  }, {
        //                      date: '2017-07-06',
        //                      value: 72
        //                  }, {
        //                      date: '2017-07-07',
        //                      value: 106
        //                  }, {
        //                      date: '2017-07-08',
        //                      value: 107
        //                  }, {
        //                      date: '2017-07-09',
        //                      value: 66
        //                  }, {
        //                      date: '2017-07-10',
        //                      value: 91
        //                  }, {
        //                      date: '2017-07-11',
        //                      value: 92
        //                  }, {
        //                      date: '2017-07-12',
        //                      value: 113
        //                  }, {
        //                      date: '2017-07-13',
        //                      value: 107
        //                  }, {
        //                      date: '2017-07-14',
        //                      value: 131
        //                  }, {
        //                      date: '2017-07-15',
        //                      value: 111
        //                  }, {
        //                      date: '2017-07-16',
        //                      value: 64
        //                  }, {
        //                      date: '2017-07-17',
        //                      value: 69
        //                  }, {
        //                      date: '2017-07-18',
        //                      value: 88
        //                  }, {
        //                      date: '2017-07-19',
        //                      value: 77
        //                  }, {
        //                      date: '2017-07-20',
        //                      value: 83
        //                  }, {
        //                      date: '2017-07-21',
        //                      value: 111
        //                  }, {
        //                      date: '2017-07-22',
        //                      value: 57
        //                  }, {
        //                      date: '2017-07-23',
        //                      value: 55
        //                  }, {
        //                      date: '2017-07-24',
        //                      value: 60
        //                  }];
        //
        //
        //
        //                chart.source(data, {
        //                    value: {
        //                        tickCount: 5,
        //                        min: 0
        //                    },
        //                    date: {
        //                        type: 'timeCat',
        //                        range: [ 0, 1 ],
        //                        tickCount: 3
        //                    }
        //                });
        //                chart.tooltip({
        //                    custom: true,
        //                    showXTip: true,
        //                    showYTip: true,
        //                    snap: true,
        //                    crosshairsType: 'xy',
        //                    crosshairsStyle: {
        //                        lineDash: [ 2 ]
        //                    }
        //                });
        //                chart.axis('date', {
        //                    label: function label(text, index, total) {
        //                        const textCfg = {};
        //                        if (index === 0) {
        //                            textCfg.textAlign = 'left';
        //                        } else if (index === total - 1) {
        //                            textCfg.textAlign = 'right';
        //                        }
        //                        return textCfg;
        //                    }
        //                });
        //                chart.line().position('date*value');
        //                chart.render();
        //            },
        //            fail: function(data, code) {
        //                console.log('Failed to obtain device information. Error code:'+ code + '; Error information: ' + data);
        //            },
        //        });
        const draw = () => {
            const el = this.$refs.canvas;
            const bufferEl = this.$refs.canvasbuffer;
            const ctx = el.getContext('2d');
            const bufferCtx = bufferEl.getContext('2d');

            //            ctx.clearRect(0, 0, 100, 100);
            //            ctx.fillStyle = 'rgb(255,0,0)';
            //            ctx.fillRect(0, 0, 50, 50);
            //            ctx.globalAlpha = 0.4;
            //            ctx.fillStyle = 'rgb(0,0,255)';
            //            ctx.fillRect(50, 50, 50, 50);
            bufferCtx.fillStyle = 'rgb(255,0,0)';
            bufferCtx.fillRect(0, 0, 50, 50);
            // bufferCtx.globalAlpha = 0.4;
            bufferCtx.fillStyle = 'rgb(0,0,255)';
            bufferCtx.fillRect(50, 50, 50, 50);

            ctx.clearRect(0, 0, 100, 100);
            const imageData = bufferCtx.getImageData(0,0,200,200)
            ctx.putImageData(imageData, 0, 0, 200, 200);
            requestAnimationFrame(draw);
        }

        //        draw()
        requestAnimationFrame(draw);
        //        draw()



    },
    handleClick() {
        const el = this.$refs.canvas1;
        const ctx = el.getContext('2d');
        ctx.beginPath();
        ctx.arc(100, 75, 50, 0, 6.28);
        ctx.stroke();
    },
    antialias() {
        const el = this.$refs.canvas1;
        const ctx = el.getContext('2d');
        ctx.beginPath();
        ctx.arc(100, 75, 50, 0, 6.28);
        ctx.stroke();
    },

    touchStart: (e) => {
        chartInstance.get('el').dispatchEvent('touchstart', wrapEvent(e));
    },
    touchMove: (e) => {

        chartInstance.get('el').dispatchEvent('touchmove', wrapEvent(e));
    },
    touchEnd: (e) => {

        chartInstance.get('el').dispatchEvent('touchend', wrapEvent(e));
    }
}
